<template>
    <basic-container class="iotrules-page" v-if="permission['iotrules_view']">
        <!-- 顶部搜索框 -->
        <el-space wrap>
            <el-input v-model="search" style="width: 240px" placeholder="请输入" />
            <el-select v-model="status" placeholder="请选择" style="width: 240px" @change="getInfo">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button type="primary" :icon="Search" @click="getInfo">搜索</el-button>
        </el-space>
        <el-table ref="multipleTableRef" :data="tableData" row-key="id" style="width: 100%;margin-top: 30px;">
            <el-table-column property="title" label="标题" width="200" />
            <el-table-column property="deviceIds" label="设备" width="120" />
            <el-table-column property="content" label="内容">
                <template #default="scope">
                    <el-popover :width="500"
                        popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
                        <template #reference>
                            <div>{{ scope.row.content }}</div>
                        </template>
                        <template #default>
                            <div>{{ scope.row.content }}</div>
                            <div v-for="(img, index) of scope.row.images">
                                {{ img }}
                                <el-image style="width: 100px; height: 100px" :src="img" />
                            </div>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column property="状态" label="状态" width="120">
                <template #default="scope">
                    {{ scope.row.status === 1 ? '已处理' : '未处理' }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200" fixed="right">
                <template #default="scope">
                    <el-button type="primary" :icon="Edit" link @click="undate(scope.row)"
                        v-if="permission['iotrules_edit'] && scope.row.status === 2">去处理</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
                :background="true" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"
                :hide-on-single-page="false" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                style="margin-top: 10px;" />
        </div>
    </basic-container>
</template>

<script lang="ts" setup>
import { ref, watch, computed } from 'vue'
import { getOpinionFeedbackList, updateStatus } from "@/api/desk/opinionfeedback";
import { Edit, Search } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'

const store = useStore()
const permission = computed(() => store.getters.permission)

const search = ref('')
const status = ref(0)
const options = ref([{
    value: 0,
    label: '全部'
}, {
    value: 1,
    label: '已处理'
}, {
    value: 2,
    label: '未处理'
}])
const tableData = ref([])
const currentPage = ref(1)
const pageSize = ref(20)
const totalPage = ref(0)

const undate = (item) => {
    ElMessageBox.confirm(
        '确认已经处理完成了吗?',
        '确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            updateStatus(item.id, 1).then((res) => {
                ElMessage({
                    type: 'success',
                    message: '已处理',
                })
                getInfo()
            })

        })
}

const getInfo = () => {
    getOpinionFeedbackList({
        current: currentPage.value,
        size: pageSize.value,
        status: status.value,
        search: search.value // TODO: 接口缺少模糊搜索参数
    }).then((res) => {
        totalPage.value = res.data.data.total
        tableData.value = res.data.data.records.map((item) => {
            item.images = item.url ? item.url.split(',') : []
            return item
        })
    })
}
const handleSizeChange = (val: number) => {
    pageSize.value = val
    currentPage.value = 1
    getInfo()
}
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    getInfo()
}

getInfo()

</script>
